<template>
  <div
    class="playlist-panel column q-pa-sm fit no-wrap golden-layout-panel"
    v-if="playlist"
  >
    <div class="row no-wrap items-center q-ml-sm">
      <div class="title one-line-text">{{ playlist.title }}</div>
      <q-btn
        :icon="showDesc ? 'mdi-chevron-up' : 'mdi-chevron-down'"
        flat
        padding="xs"
        @click="showDesc = !showDesc"
      />
    </div>
    <q-slide-transition>
      <div class="description q-pa-sm text-sub" v-show="showDesc">
        <div class="three-line-text">{{ playlist.description }}</div>
      </div>
    </q-slide-transition>
    <div class="row justify-between q-px-sm">
      <div class="row q-gutter-x-sm items-center">
        <q-avatar size="18px">
          <q-img :src="playlist.creatorAvatar" />
        </q-avatar>
        <div class="text-sub">{{ playlist.creatorName }}</div>
      </div>
      <div class="row q-gutter-x-sm items-center text-sub">
        <div>{{ playlist.numContents }} Videos</div>
        <q-btn
          flat
          icon="mdi-shuffle"
          padding="xs"
          :text-color="hasShuffle ? 'white' : 'sub'"
          @click="hasShuffle = !hasShuffle"
        ></q-btn>
        <q-btn
          flat
          icon="mdi-repeat"
          padding="xs"
          :text-color="hasRepeat ? 'white' : 'sub'"
          @click="hasRepeat = !hasRepeat"
        ></q-btn>
      </div>
    </div>
    <q-scroll-area class="col q-mt-sm">
      <q-list
        class="column q-gutter-y-sm"
        v-if="playlist && playlist.contents.length > 0"
      >
        <playlist-item
          v-for="(item, index) in playlist.contents"
          :key="item.id"
          :video="item"
          :index="index"
        />
      </q-list>
    </q-scroll-area>
  </div>
  <div v-else class="column q-pa-sm golden-layout-panel">
    <div class="text-sub one-line-text text-center full-width">
      Add video to my Playlist
    </div>
    <div class="column col">
      <div
        class="row justify-between items-center no-wrap"
        v-if="currentUser && watchLater"
      >
        <q-checkbox v-model="selectedPlaylist" label="Watch Later" />
        <div class="row no-wrap items-center">
          <div class="text-sub q-mr-sm">{{ watchLater.length }} Videos</div>
          <q-icon name="mdi-cloud-lock" />
        </div>
      </div>
      <template v-if="currentUser && playlists">
        <div
          class="row justify-between items-center no-wrap"
          v-for="item in playlists"
          :key="item.id"
        >
          <q-checkbox v-model="selectedPlaylist" :label="item.title" />
          <div class="row no-wrap items-center">
            <div class="text-sub q-mr-sm">{{ item.numContents }} Videos</div>
            <q-icon name="mdi-cloud-lock" />
          </div>
        </div>
      </template>
    </div>
    <div>
      <q-btn
        icon="mdi-plus"
        color="sub"
        flat
        label="Create new Playlist"
        no-caps
        padding="xs"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, computed } from 'vue';
import Playlist from 'src/models/Playlist';
import PlaylistItem from './PlaylistPanelListItem.vue';
import Video from 'src/models/Video';
import Me from 'src/models/Me';
import { useUserStore } from 'src/stores/user-store';
import { useVideoStore } from 'src/stores/video-store';
const userStore = useUserStore();
const videoStore = useVideoStore();
const playlist = computed(() => videoStore.currentPlaylist);
const playlists = computed(() => userStore.myPlaylists);
const watchLater = computed(() => userStore.watchLater);
const currentUser = computed(() => userStore.currentUser);
const showDesc = ref(false);
const hasRepeat = ref(false);
const hasShuffle = ref(false);
const selectedPlaylist = ref<Playlist[]>([]);
onBeforeMount(async () => {
  if (currentUser.value) {
    await userStore.getMyPlaylists();
    await userStore.getWatchLater();
  }
});
</script>
<style lang="scss" scoped>
.playlist-panel {
  .title {
    font-size: 16px;
  }
}
</style>
